<template>
  <view>
    <view class="item-cell">
      <view class="item-cell-left">意向产品 <text class="require">*</text></view>
      <view class="item-cell-right">
        <input placeholder="请输入意向产品" v-model="from.title"/>
      </view>
    </view>
    <view class="item-cell">
      <view class="item-cell-left">产品品类 <text class="require">*</text></view>
      <view class="item-cell-right" @click="openTypePicker">
        <lb-picker
            :value="from.typeValue"
            :list="common.modulesData.categoryModules"
            :props="typeMap"
            :level="3"
            mode="multiSelector"
            @confirm="typeConfirm"
            ref="typePicker">
          <view>{{ from.industry.length>0 ? from.industry : '请选择产品品类' }}</view>
        </lb-picker>
      </view>
    </view>
    <view class="item-cell">
      <view class="item-cell-left">留言 <text class="require">*</text></view>
    </view>
    <view class="item-cell">
      <uni-easyinput type="textarea" v-model="from.content" placeholder="请输入内容"></uni-easyinput>
    </view>
<!--    <view class="item-cell">-->
<!--      <view class="item-cell-left">公司名称 <text class="require">*</text></view>-->
<!--      <view class="item-cell-right">-->
<!--        <input placeholder="请输入公司名称" v-model="from.company"/>-->
<!--      </view>-->
<!--    </view>-->

    <view class="item-cell">
      <view class="item-cell-left">姓名 <text class="require">*</text></view>
      <view class="item-cell-right">
        <input placeholder="请输入姓名" v-model="from.contacts"/>
      </view>
    </view>
    <view class="item-cell">
      <view class="item-cell-left">联系电话 <text class="require">*</text></view>
      <view class="item-cell-right">
        <input placeholder="请输入联系电话" v-model="from.contact_number"/>
      </view>
    </view>
    <view class="item-cell">
      <view class="item-cell-left">地区 <text class="require">*</text></view>
      <view class="item-cell-right" @click="openCityPicker">
        <lb-picker
            :value="from.cityValue"
            :list="cityData"
            :props="cityMap"
            :level="2"
            mode="multiSelector"
            @confirm="cityConfirm"
            ref="cityPicker">
          <view>{{ from.area.length>0 ? from.area : '请选择地区' }}</view>
        </lb-picker>
      </view>
    </view>
<!--    <view class="item-cell">-->
<!--      <view class="item-cell-left">微信二维码</view>-->
<!--      <view @tap="chooseImage" class="item-cell-right">-->
<!--        <image class="item-img" :src="from.qrcode"></image>-->
<!--      </view>-->
<!--    </view>-->
    <view class="btn-submit" @click="addSubmit">保存</view>
  </view>
</template>

<script>
import { mapState } from 'vuex';
import LbPicker from '@/components/lb-picker'
export default {
  computed: {
    ...mapState(['common'])
  },
  components: {LbPicker},
  created() {
    this.getCityData()
  },
  data() {
    return {
      cityData:[],
      typeMap:{
        label: 'name',
        value: 'id',
        children: 'childlist'
      },
      cityMap:{
        label: 'name',
        children: 'city'
      },
      from:{
        title:'',
        content:"对产品很感兴趣，请电话联系",
        company:"1",
        qrcode:"",
        typeValue:[],
        industry:'',
        cityValue:[],
        area:'',
        contacts:'',
        contact_number:'',
      }

    }
  },
  methods: {
    getCityData(){
      uni.request({
        url: 'https://www.xiushibang.com/uploads/city.json',
        success: (res) => {
          this.cityData = res.data
        }
      });
    },
    openCityPicker(){
      this.$refs.cityPicker.show() // 显示
    },
    openTypePicker(){
      this.$refs.typePicker.show() // 显示
    },
    typeConfirm(e){
      var value = e.value
      var valueName = []
      for(var i=0;i<value.length;i++){
        valueName.push(e.item[i].name)
      }
      this.from.industry = valueName.join('/')
      this.from.typeValue =  value
      console.log(value)
      console.log(valueName)
    },
    cityConfirm(e){
      var value = e.value
      var valueName = []
      for(var i=0;i<value.length;i++){
        if (!(i !== 0 && e.item[i].name === "全部")){
          valueName.push(e.item[i].name)
        }
      }
      this.from.area = valueName.join('/')
      this.from.cityValue =  value
      console.log(value)
      console.log(valueName)
    },
    chooseImage(){
      console.log("chooseImage")
      uni.chooseImage({
        count: 1, // 默认
        sourceType: ['album'], // 可以指定来源是相册还是相机，默认二者都有
        success: res => {
          this.getCropperImage(res.tempFilePaths[0])
        },
        fail: res => {
          console.log(res)
        }
      });
    },
    getCropperImage(path) {

      // 上传图片
      this.$api.upload({
        url: '/common/upload',
        filePath: path,
        name: 'file',
        business: null,
        skipInterceptorResponse: true,
        success: (res) => {
          this.from.qrcode = res.data.url
        }
      });
    },
    addSubmit(){
      const _that = this
      if (!this.from.title){
        this.$wanlshop.msg('请输入标题')
      }else if (!this.from.content){
        this.$wanlshop.msg('请输入内容')
      }else if (!this.from.company){
        this.$wanlshop.msg('请输入公司')
      }else if (!this.from.industry){
        this.$wanlshop.msg('请选择行业')
      }else if (!this.from.area){
        this.$wanlshop.msg('请选择地区')
      }else if (!this.from.contacts){
        this.$wanlshop.msg('请输入联系人')
      }else if (!this.from.contact_number){
        this.$wanlshop.msg('请输入联系电话')
      }else{
        this.$api.post({
          url: '/wanlshop/invitation/publish',
          data: _that.from,
          success: res => {
            this.$wanlshop.msg('发布成功')
            this.$wanlshop.back()
          }
        });
      }

    }
  },
}
</script>

<style lang="scss">
  .item-cell{
    min-height: 80rpx;
    padding: 20rpx 40rpx;
    display: flex;
    align-items: center;
    border-bottom: 1rpx solid #eee;
  }
  .item-cell-left{
    width: 200rpx;
  }
  .item-cell-left  .require{
    color: red;
    margin-left: 10rpx;
  }
  .item-cell-right{
    flex: 1;
  }
  .item-img{
    width: 200rpx;
    height: 200rpx;
  }
  .btn-submit{
    width: 700rpx;
    margin: 30rpx auto;
    height: 80rpx;
    line-height: 80rpx;
    background: #ff9000;
    border-radius: 15rpx;
    color: white;
    text-align: center;

  }
</style>
